package com.sy.musicapp.ui.search

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.KeyboardArrowLeft
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.sy.musicapp.Util
import com.sy.musicapp.model.Music
import com.sy.musicapp.model.MusicViewModel
import com.sy.musicapp.ui.common.MusicListItem
import com.sy.musicapp.ui.common.noRippleClickable
import com.sy.musicapp.ui.theme.Global

/**
 * 搜索页
 * @param key 搜索关键字
 * @author SY
 * @since 2022-02-01 17:05
 **/
@ExperimentalAnimationApi
@Composable
fun SearchScreen(
    navController: NavHostController,
    key: String,
    resultList: List<Music>,
    musicModel: MusicViewModel,
    onItemClick: (Int) -> Unit,
    onItemAddNext: (Music) -> Unit
) {
    val currentIndex by musicModel.currentMusicIndex.collectAsState()
    var currentPlay: Music by remember {
        mutableStateOf(Music.Empty)
    }
    LaunchedEffect(currentIndex) {
        currentPlay = musicModel.getCurrentMusic()
    }
    LazyColumn(
        contentPadding = PaddingValues(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        state = rememberLazyListState()
    ) {
        item {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    imageVector = Icons.Outlined.KeyboardArrowLeft,
                    contentDescription = "back",
                    tint = Global.colors.onPrimary,
                    modifier = Modifier.noRippleClickable {
                        navController.popBackStack()
                    })
                Text(text = key, color = Global.colors.onPrimary)
            }
        }
        itemsIndexed(
            resultList,
            { _: Int, item: Music -> item.id }) { index: Int, item: Music ->
            MusicListItem(
                music = item,
                action = currentPlay,
                isShowImgOnDefault = currentPlay.id == item.id,
                itemClick = {
                    onItemClick(index)
                    Util.showLog("播放Music$item")
                },
                itemIconClick = {
                    onItemAddNext(item)
                    Util.showLog("添加Next Music$item")
                }
            )
        }
    }

}